<script setup>
import QueueComponent from './components/QueueComponent.vue';

// 创建一个包含20个元素的数组，用于v-for循环
const componentCount = 20;
const indices = Array.from({ length: componentCount }, (_, i) => i + 1);
</script>

<template>
  <div>
    <h1 class="title">排队选号系统</h1>
    <div class="container">
      <QueueComponent 
        v-for="index in indices" 
        :key="index" 
        :index="index">
      </QueueComponent>
    </div>
  </div>
</template>

<style>
body {
  font-family: Arial, sans-serif;
  margin: 20px;
  background-color: #f5f5f5;
}

.title {
  text-align: center;
  color: #333;
}

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  max-width: 1400px;
  margin: 0 auto;
}
</style>